﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DisplayBoardMain.aspx.cs" Inherits="Catering.DisplayBoards.DisplayBoardMain" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>展板首页</title>
    <link href="/Style/DisplayBoard.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="/Scripts/jquery_nav.js" type="text/javascript"></script>

    <style type="text/css">
        .Top{ width:100%; height:142px; background:url(/images/images_02.jpg) repeat-x;}
        .Top_Main{width:100%; height:142px; background:url(/images/images_01.jpg) no-repeat center; text-align:center; position:relative;}
        .Top_Main h2{ width:100%; height:50px; padding-top:92px;}
        .Top_Main span{ float:right; display:inline; font-size:20px; position:absolute; right:30px; top:105px;}
        
        .Main{ width:100%; min-height:750px; background:url(/images/images_03.jpg) no-repeat center; padding-top:10px;}
        .Main_Content{width:90%; margin:0 auto; min-height:700px; position:relative; overflow:hidden;}
        .Content{width:100%; min-height:700px;background-color:#fff; position:absolute; top:-7px; left:-10px; overflow:hidden;}
        #content_main{ width:100%;height:600px; padding-top:20px;margin-left:23px;}
        
        .Content_foot{width:100%; text-align:center; height:55px; line-height:55px; position:relative; padding-top:10px;}
        .Page { width:150px; height:55px; position:absolute; right:0px; top:10px;}
        .Page li{ width:22px; height:55px; float:left; display:block; background:url(/images/images_09.png) no-repeat;}
        .Page .on{width:22px; height:55px; float:left; display:block; background:url(/images/images_08.png) no-repeat;}
        
        /*可伸缩边框样式*/
        .border_top{ width:100%; height:10px; background:url(/images/images_06.png) 0px 0px; position:absolute; top:0px; left:-10px;}
        .border_left{ width:10px; min-height:680px; /*比内容高度小20px*/
                      background:url(/images/images_07.png) repeat-y 0px 0px ; position:absolute; left:0px; top:10px;}
        .border_right{width:10px; min-height:680px;/*比内容高度小20px*/
                       background:url(/images/images_07.png) repeat-y -21px 0px ; position:absolute; right:0px; top:10px;}
        .border_foot{width:100%; height:10px; background:url(/images/images_06.png) 0px -60px ; position:absolute; bottom:0px;left:-10px;}
        .border_lefttop{width:10px; height:10px; background:url(/images/images_06.png) 0px -80px; position:absolute; top:0px; left:0px;}
        .border_rigthtop{width:10px; height:10px; background:url(/images/images_06.png) 0px -100px; position:absolute; top:0px; right:0px;}
        .border_leftbottom{width:10px; height:10px; background:url(/images/images_06.png) 0px -120px; position:absolute; bottom:0px; left:0px;}
        .border_rightbottom{width:10px; height:10px; background:url(/images/images_06.png) 0px -140px; position:absolute; bottom:0px; right:0px;}
        
        
        .Foot{ width:100%; height:72px; background-color:#0064a3; position:fixed; bottom:0px;}
        .Foot_Log{ float:right; display:inline; margin-right:20px; margin-top:5px;}
    </style>

    <script type="text/javascript">
        $(function () {
            function ShowTime() {
                var mydate = new Date();
                var str = "" + mydate.getFullYear() + "年";
                str += (mydate.getMonth() + 1) + "月";
                str += mydate.getDate() + "日"; // <br/>
                //str += mydate.toLocaleTimeString();
                //str += ":" + mydate.toLocaleTimeString();
                //str += ":" + mydate.getMilliseconds() + " <br/>星期";
                str += "  星期";
                str += "天一二三四五六".charAt(mydate.getDay());// +"<br/>今年是闰年吗?:";
                //str += ((mydate.getFullYear() % 4 == 0 && mydate.getFullYear() % 100 != 0) || (mydate.getFullYear() % 400 == 0)) ? "是" : "不是";
                $(".Top_Main span").html("今天是" + str);
            };
            ShowTime();
            setInterval(ShowTime, 1000);
        }); 

</script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="Top">
        <div class="Top_Main">
            <h2><img id="TitleImg" src="/images/images_05.jpg" /></h2>
            <span>今天是2014年8月2日 星期六</span>
        </div>
    </div>
    <div class="Main">
        <div class="Main_Content">
            <div class="Content">
                <div id="content_main" style="position: relative;overflow: hidden;">
                    <table border="0" cellpadding="0" cellspacing="0" width="100%" id="SliderContent" style="position: absolute;">
                        <tr>
                            <td><div class="iframeContent"><iframe src="/DisplayBoards/SafetyStewardBoard.aspx" frameborder="0" width="100%" height="100%"></iframe></div></td>
                            <td><div class="iframeContent"><iframe src="/DisplayBoards/ProductionBoard.aspx" frameborder="0" width="100%" height="100%"></iframe></div></td>
                            <td><div class="iframeContent"><iframe src="/DisplayBoards/ClassDynamicBoard.aspx" frameborder="0" width="100%" height="100%"></iframe></div></td>
                            <td><div class="iframeContent"><iframe src="/DisplayBoards/SatellitePlatformBoard.aspx" frameborder="0" width="100%" height="100%"></iframe></div></td>
                            <td><div class="iframeContent"><iframe src="/DisplayBoards/ContractorBoard.aspx" frameborder="0" width="100%" height="100%"></iframe></div></td>
                        </tr>
                    </table>
                </div>
                <div class="Content_foot">
                    <a href="javascript:void(0);" onclick="ChangeRun()"><img id="startbutton" src="/Images/images_23.jpg" width="55" height="55" isstart="false" /></a>
                    <ul id="idNum" class="Page"></ul>
                </div>
                <script type="text/javascript">
                    var content_main_height = parseInt($("#content_main").css("width").toString().replace("px",""));
                    $("#content_main").css("width", content_main_height-30);
                    //alert($("#content_main").css("width"));
                    $(".iframeContent").css("width", $("#SliderContent").css("width")).css("height", $("#content_main").css("height"));

                    //页面代码
                    var forEach = function (array, callback, thisObject) {
                        if (array.forEach) {
                            array.forEach(callback, thisObject);
                        } else {
                            for (var i = 0, len = array.length; i < len; i++) { callback.call(thisObject, array[i], i, array); }
                        }
                    }
                    var st = new SlideTrans("content_main", "SliderContent", 5, { Vertical: false });

                    var nums = [];
                    //插入数字
                    for (var i = 0, n = st._count - 1; i <= n; ) {
                        (nums[i] = $$("idNum").appendChild(document.createElement("li"))).innerHTML = "";
                        ++i;
                    }

                    forEach(nums, function (o, i) {
                        o.onmouseover = function () { o.className = "on"; st.Auto = false; st.Run(i); }
                        o.onmouseout = function () { o.className = ""; if ($("#startbutton").attr("IsStart") == "true") { st.Auto = true; st.Run(); } }
                    })

                    //设置按钮样式
                    st.onStart = function () {
                        forEach(nums, function (o, i) {
                            o.className = st.Index == i ? "on" : "";

                        });
                        switch (st.Index) {
                            case 0:
                                $("#TitleImg").attr("src", "/images/images_05.jpg");
                                break;
                            case 1:
                                $("#TitleImg").attr("src", "/images/images_20.jpg");
                                break;
                            case 2:
                                $("#TitleImg").attr("src", "/images/images_15.jpg");
                                break;
                            case 3:
                                $("#TitleImg").attr("src", "/images/images_19.jpg");
                                break;
                            case 4:
                                $("#TitleImg").attr("src", "/images/images_28.jpg");
                                break;
                        }

                    }

                    //控制开始与停止
                    function ChangeRun() {
                        if ($("#startbutton").attr("IsStart") == "false") {
                            st.Auto = true;
                            st.Run();
                            $("#startbutton").attr("src", '/Images/images_10.png').attr("IsStart", "true");
                        }
                        else {
                            st.Auto = false;
                            $("#startbutton").attr("src", '/Images/images_23.jpg').attr("IsStart", "false");
                        }
                    }
                </script>
            </div>
            <div class="border_top"></div>
            <div class="border_left"></div>
            <div class="border_right"></div>
            <div class="border_foot"></div>
            <div class="border_lefttop"></div>
            <div class="border_rigthtop"></div>
            <div class="border_leftbottom"></div>
            <div class="border_rightbottom"></div>
        </div>
    </div>
    <div class="Foot">
        <div class="Foot_Log"><img src="/images/images_04.jpg" /></div>
    </div>
    </form>
</body>
</html>
